<template>
    <el-dialog
      v-model="isShow"
      title="更换会长"
      width="640"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <el-form class="dialog-form" label-width="140px">
        <el-row :gutter="20">
          <el-col :xs="24">
            <el-form-item label="会长：" required>
              <el-input
                v-model="leaderName"
                readonly
                placeholder="请选择"
                @click="refMySelect.init()"
              >
                <template #append><span @click="refMySelect.init()">选择</span></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="会长名称：">
              <el-input v-model="form.leaderName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="会长手机号：">
              <el-input v-model="form.leaderPhone" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="微信联系二维码：">
                <ImageUpload v-model:imageUrl="form.leaderWxUrl"></ImageUpload>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" :loading="btnLoading" @click="toSubmit">确定</el-button>
        </span>
      </template>
      <my-select ref="refMySelect" @confirm="getLeader"/>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import {ElMessage, ElMessageBox} from 'element-plus'
    const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
  import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
  const MySelect = defineAsyncComponent(() => import('./MySelect.vue'));
  const refMySelect = ref();
  const emit = defineEmits(['confirm']);
  const {proxy} :any = getCurrentInstance();
  let isShow = ref(false);
  let leaderName = ref(null);
  let form = reactive({
        guildId: null,
      guildName: null,
      leaderName: null,
      leaderPhone: null,
      leaderWxUrl: null,
  });
  let btnLoading = ref(false);
  const init = (row) => {
    proxy.$util.resetForm(form, row);
    isShow.value = true;
  };
  const getLeader = (data) => {
    form.leaderId = data.userId;
    leaderName.value = data.username;
  }
  const toSubmit = ()=>{
    btnLoading.value = true;
    proxy.$request('put', '/admin/guilds/updateGuildsLeader', form, (data,msg) => {
        ElMessage.success('提交成功')
        emit('confirm');
        btnLoading.value = false;
        isShow.value = false;
    },msg => {
        btnLoading.value = false;
    })
    
  }
  defineExpose({
    init,
  })
  </script>
  
  <style>
  
  </style>